<template>
    <div class="login_container">
        <div class="loginColumns animated fadeInDown">
            <div class="row">
                    <div class="col-md-5 welcome">
                        <h2 class="font-bold">欢迎使用编码枪系统</h2>
                        <p>本系统能够使你快速构建后台，减少程序员工作量</p>
                    </div>
                    <div class="col-md-7">
                    <div class="resetTip">
                        <h3>忘记密码</h3>
                        <p>输入您的电子邮件地址，我们会将验证码通过电子邮件发送给您邮件账户进行验证，进行重置密码操作</p>
                    </div>
                        <div class="ibox-content">
                        <el-form ref="registerFormRef" :rules="registerFormRules" :model="resetForm" label-width="0px" class="register_form">
                            <!-- 邮箱 -->
                            <el-form-item label="输入邮箱名" prop="userEmail" label-width="90px">
                            <el-input
                                v-model="resetForm.userEmail"
                                prefix-icon="el-icon-s-cooperation" placeholder="请输入邮箱" style="width:180px"
                            ></el-input>
                            <el-button type="success" plain style="margin-left: 8px">发送验证码</el-button>
                            </el-form-item>
                            <!-- 输入验证码 -->
                            <el-form-item label="输入验证码" prop="captcha"  label-width="90px">
                            <el-input
                                type="text"
                                v-model="resetForm.captcha"
                                prefix-icon="el-icon-info" placeholder="请输入收到的验证码"
                            ></el-input>
                            </el-form-item>
                            <!-- 密码 -->
                            <el-form-item label="输入新密码" prop="password"  label-width="90px">
                            <el-input
                                type="password"
                                v-model="resetForm.password"
                                prefix-icon="el-icon-lock" placeholder="请重新输入密码"
                            ></el-input>
                            </el-form-item>
                            <!-- 确认密码 -->
                            <el-form-item label="确认新密码" prop="comfirmPassword"  label-width="90px">
                            <el-input
                                type="password"
                                v-model="resetForm.comfirmPassword" placeholder="请再次输入密码"
                                prefix-icon="el-icon-lock"
                            ></el-input>
                            </el-form-item>
                            <button class="loginBtn" @click="resetPassword">重置密码</button>
                        </el-form>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            resetForm: {
                userEmail: '',
                password: '',
                comfirmPassword: ''
            },
        }
    }
}
</script>
<style lang="less" scoped>
    .login_container {
  height: 100%;
  width: 100%;
  background-color: #F3F3F4;
  .loginColumns {
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 20px 20px 20px;
    .welcome {
        color: #676a6c;
        padding-left: 0px;
        .font-bold {
            font-weight: 600;
            font-family: inherit;
            font-size: 24px;
          }
          p {
              font-size: 14px;
          }
    }
    .resetTip {
      color: #676a6c;
      margin-left: 25px;
      h3 {
        font-size: 16px;
        font-weight: 600;
      }
      p {
        font-size: 13px;
      }
    }
  }
}
.login_container::before {
  content:"";
  display:table;
}
.ibox-content {
  clear: both;
  color: inherit;
  padding: 15px 20px 20px 20px;
}
.loginBtn {
  width: 100%;
  height: 26px;
  border-radius: 3px;
  line-height: 0px;
  color: #fff;
  background-color: #1BB394;
  font-size: 13px;
  border: none;
}
</style>